<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-lx-calendar"></i> 表单</el-breadcrumb-item>
                <el-breadcrumb-item>编辑分类</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="form-box">
                <el-form ref="form" :model="form" label-width="80px">
                    <el-form-item label="父节点">
                        <el-select v-model="form.parentId" placeholder="请选择">
                            <el-option key="0" label="根节点" value="0"></el-option>
                            <!--将parents循环。获取每一项的值，一定要将属性绑定，不然显示的是字符串-->
                            <el-option v-for="category in parents" :key="category.id" :label="category.name" :value="category.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="分类名称">
                        <el-input v-model="form.name"></el-input>
                    </el-form-item>
                    <el-form-item label="是否显示">
                        <el-radio-group v-model="form.isShow">
                            <el-radio label="1">是</el-radio>
                            <el-radio label="0">否</el-radio>
                        </el-radio-group>
                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary" @click="onSure()">确认</el-button>
                        <el-button @click="cancel()">取消</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>

    </div>
</template>

<script>
    export default {
        name: 'form',
        data: function(){
            return {
                form: {
                    id: "",
                    name: "",
                    label: "",
                    parentId: "",
                    isShow: "",
                    orderBy: "",
                    isLeaf: "",
                    parentName: ""
                },
                parents:[],
                disableEdit:true


            }
        },
        activated(){
            // actived  每次进入页面就会重新加载数据
            let id = this.$route.params.id;
            this.getDetail(id);
            this.getParent();

        },
        created(){
            //初次进入页面就会加载数据
            let id = this.$route.params.id;  //获取id值
            this.getParent();
            this.getDetail(id);
        },
        methods: {
            onSure() {
                let self =this;
                let url = this.HOST + "/category"
                this.$axios.put(url,self.form).then(res=>{
                    if (res.data.code === 100) {
                        self.$message.success(res.data.mesg);
                        self.$router.push('/category/table');
                    } else {
                        self.$message.error(res.data.mesg)
                    }
                })
            },
            getParent() {
                //查询全部分类，使用parents保存下来，再通过下拉框循环输出
                let self = this;
                let url = this.HOST + "/category/all"
                this.$axios.post(url, {
                    parentId:0
                }).then((res) => {
                    // console.log(res.data)
                    if (res.data.code === 100) {
                        self.parents=res.data.data;
                        console.log(res.data.data)
                    } else {
                        self.$message.error(res.data.mesg)
                    }
                })
            },
            //回填信息
            getDetail(id){
                let self = this;
                let url = this.HOST + "/category/"+id;
                this.$axios.get(url).then((res) => {
                    if (res.data.code === 100) {
                        self.form=res.data.data;
                        // console.log(res.data.data)
                    } else {
                        self.$message.error(res.data.mesg)
                    }
                })
            },
            cancel(){
                this.$router.go(-1);
            },
        }
    }
</script>
<!--1 点击编辑，跳转到编辑页面，根据id拿到需要编辑的信息，this.$router.push-->
<!--2、在根据接口，回填已有信息，把id带上    this.$params.id-->
<!--3、编辑确定无误后，就提交表单，分类列表就重新刷新-->
<!--4、此时注意，要在actived钩子函数中调用方法，不然进入页面，是初次加载的页面-->
<!--5、取消 cancel方法-->